<div>
    <script>
        //注意此类页面中任何js变量必须放在this里
        //任何id和class必须标明前缀例如list_name info_name
        //除了tempcont
        var fthis = this;
        this.init = function (funs) {
        }
        this.display = function (infoobj) {
            var node = document.getElementById("list_list");
            node.innerHTML = "";
            for (var t = 0; t < infoobj.length; ++t) {
                var pair = infoobj[t];
                var tnode = document.getElementById("list_itemtemp");
                var text = tnode.innerHTML;
                var desstr = ""; //说明字符串
                if (pair.profile < 100) desstr = pair.profile;
                else desstr = pair.profile.substr(0, 50) + "......";
//                var html = text.format(pair.title, timetrans(pair.beginTime), desstr, timetrans(pair.signTimeBegin), timetrans(pair.singTimeEnd), pair.seen, pair._id);
                var html = text.format(pair.name, pair.date, desstr, pair.beginSign, pair.endSign, pair._id);
                var hnode = GTlate.GenTools.GetNodeFromText(html);
//                hnode.onclick = function () {
//                    fthis.list_click(hnode);
//                };
                node.appendChild(hnode);
            }
        }
        this.list_click = function (node) {
            var sign = node.getAttribute("sign");
            funs.displayInfo(sign);
        }
    </script>
    <style>
        #list_cont {
            background: url("image/random.jpg");
            height: 720px;
            box-sizing: border-box;
            padding-top: 2rem;
        }

        .list_item {
            /*background-color: rgba(242, 249, 255, 0.8);*/
            /*box-shadow: rgba(202, 202, 202, 0.47) 0px 0px 20px 5px;*/
            /*!*color: silver;*!*/
            /*!*padding: 5px;*!*/
            /*margin-top: 20px;*/
            /*display: inline-block;*/
            /*height: 5em;*/
            /*overflow: hidden;*/
            /*width: 10em;*/
            transition: all 0.5s ease-in-out;
            position: relative;
            /*border-radius: 10px;*/
            display: -ms-flexbox;
            /*display: flex;*/
            margin: 1rem;
            width: 240px;
            height: 5em;
            overflow: hidden;
            box-shadow: 0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04);
        }

        .list_item:hover {
            height: 11.8em;
            width: 20em;
            border-radius: 10px;
        }

        .list_item * {
            color: black;
        }

        .list_top {
            height: 2em;
            line-height: 2;
        }

        .list_name {
            margin-left: 5px;
            float: left;
            line-height: inherit;
            height: inherit;
        }

        .list_begintime {
            float: right;
            margin-right: 5px;
        }

        .list_text {
            height: 4em;
            text-indent: 2em;
            margin-top: 0.5em;
            text-overflow: ellipsis;
            word-break: break-all;
            word-wrap: break-word;
            overflow: hidden;
            padding: 0 5px 0 5px;
            font-size: 0.9em;
        }

        .list_signtime {
            background-color: rgba(202, 255, 240, 0.55);
            height: 2em;
            line-height: 2;
            text-align: center;
            color: #676767;
            font-size: 0.9em;
        }

        /*.list_signtime:hover{*/
        /*background-color: rgba(60, 255, 0, 0.55);*/
        /*}*/

        .list_see {
            height: 2em;
            background-color: rgba(255, 206, 208, 0.53);
            line-height: 2;
            text-align: center;
            font-size: 0.9em;
        }

        .list_see:hover {
            background-color: rgba(255, 175, 177, 0.53);
        }

        .list_item > * {
            transition: all 0.5s ease-in-out;
            cursor: pointer;

        }

        .list_initview {
            height: 5em;
            /*line-height: 5;*/
            /*position: absolute;*/
            text-align: center;
            width: 100%;
            padding: 14px;
            box-sizing: border-box;
            /**/

        }
        .list_initview,.list_view{

            border: 1px solid #d3dce6;
            border-radius: 4px;
            background-color: #fff;
            overflow: hidden;
        }


        .list_view{
            opacity: 0;
            /*position: absolute;*/
            top:0;
            left: 0;
            /*height: 240px;*/
            /*width: 100%;*/
        }

        .list_item:hover > .list_initview {
            /*opacity: 0;*/
            height: 4em;
        }

        .list_item:hover > .list_initview ~ * {
            opacity: 1;
            /*height: 500px;*/
            /*width: inherit;*/
        }

        #list_list {
            width: 960px;
            margin: 0 auto;
            display: -ms-flexbox;
            display: flex;
            padding: 2rem;
            box-sizing: border-box;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -ms-flex-flow: row-reverse;
            flex-flow: row-reverse;
            -ms-flex-direction: row;
            flex-direction: row;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            background-color: rgba(240, 248, 255, 0.58)
        }

        @media screen and (max-width: 640px) {
            #list_list {
                width: 100%;
                text-align: center;
                display: block
            }
        }
    </style>
    <div class="tempcont">
        <div id="list_itemtemp">
            <div class="list_item">
                <div class="list_initview">{0}<div style="text-align: center;color:#999;margin-top:5px;">{1}</div></div>
                <div class="list_view">
                    <!--<div class="list_top">-->
                        <!--<div class="list_name">{0}</div>-->
                        <!--<div class="list_begintime">{1}</div>-->
                    <!--</div>-->
                    <!--<hr>-->
                    <div class="list_text">{2}</div>
                    <hr>

                    <div class="list_signtime">报名时间：{3} 到 {4}</div>
                    <div class="list_see" sign="{5}" onclick="loader.loadedPages.list.list_click(this)">查看</div>
                </div>
            </div>
        </div>
    </div>
    <div id="list_cont">
        <div id="list_list"></div>
    </div>
</div>